@import 'base/base';

/* Paddings */
$paddingNonFlex: 50px 0;
$mobileMaxWidth: 639;
$nonMobileMinWidth: 640;
$minHeightFor100vh: 480;

/* Colors */
$docsAppSecondaryColor: #007af5 !default;
$whiteColor: #fff;
$blackColor: #000;
$macWindowDarkBgColor: #292a2b;
$syntaxHighlighterColor: rgb(221, 221, 221);
$syntaxHighlighterStringColor: #ffeb3b;
$boxShadowColor1: #004977;
$boxShadow2: 0 0 0 0 rgba(0, 0, 0, 0.3), 0 23px 38px 0 rgba(0, 0, 0, 0.43),
  0 25px 65px 0 rgba(0, 0, 0, 0.1);
$boxShadowMacWindow: rgba(0, 0, 0, 0.55) 0 20px 68px;

/* Btns */
$btn-names-list: download-btn navigate-to-github;

//btns for light mode
$background-color-list: transparent transparent;
$color-list: $docsAppSecondaryColor $blackColor;
$border-color-list: $docsAppSecondaryColor $blackColor;

$background-color-active-hover-list: transparent transparent;
$border-color-active-hover-list: #606c76 #606c76;
$color-active-hover-list: #606c76 #606c76;

//btns for dark mode
$background-color-list-dark: $docsAppSecondaryColor $whiteColor;
$color-list-dark: $whiteColor $docsAppSecondaryColor;
$border-color-list-dark: $docsAppSecondaryColor $whiteColor;

$background-color-active-hover-list-dark: rgba(255, 255, 255, 0.32)
  rgba(255, 255, 255, 0.32);
$border-color-active-hover-list-dark: $whiteColor $whiteColor;
$color-active-hover-list-dark: $whiteColor $whiteColor;

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

a {
  color: $docsAppSecondaryColor;
}

pre {
  background: unset;
  border-left: unset;
}

@mixin item-align() {
  min-height: 400px;
  height: 100vh;
}

@mixin create-download-buttons(
  $btn-names-list,
  $background-color-list,
  $color-list,
  $border-color-list,
  $background-color-active-hover-list,
  $border-color-active-hover-list,
  $color-active-hover-list
) {
  @for $i from 1 through length($btn-names-list) {
    &.#{nth($btn-names-list, $i)} {
      background-color: nth($background-color-list, $i);
      color: nth($color-list, $i);
      border-color: nth($border-color-list, $i);
    }

    &.#{nth($btn-names-list, $i)}:focus,
    &.#{nth($btn-names-list, $i)}:hover {
      background-color: nth($background-color-active-hover-list, $i);
      border-color: nth($border-color-active-hover-list, $i);
      color: nth($color-active-hover-list, $i);
    }
  }
}

@media (max-width: #{$mobileMaxWidth}px) {
  .hidden-mobile {
    display: none;
  }
}

@media (min-width: #{$nonMobileMinWidth}px) {
  .hidden-nonmobile {
    display: none;
  }
}

.spinner,
.spinner::after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.spinner {
  $spinnerBorderColor: 1.1em solid rgba(255, 255, 255, 0.2);

  margin-left: auto;
  margin-right: auto;
  font-size: 5px;
  position: relative;
  text-indent: -9999em;
  border-top: $spinnerBorderColor;
  border-right: $spinnerBorderColor;
  border-bottom: $spinnerBorderColor;
  border-left: 1.1em solid $whiteColor;
  @include transform-1(translateZ(0));
  @include animation(spinner-animation 1.1s infinite linear);

  @-webkit-keyframes spinner-animation {
    0% {
      @include transform-1(rotate(0deg));
    }
    100% {
      @include transform-1(rotate(360deg));
    }
  }
  @keyframes spinner-animation {
    0% {
      @include transform-1(rotate(0deg));
    }
    100% {
      @include transform-1(rotate(360deg));
    }
  }
}

.divider {
  margin: 0 50px 0 50px;
  border: 0;
  border-top: 0.1rem solid rgba(0, 0, 0, 0.25);
}

.syntax-highlighter {
  pre.syntax-highlighter-wrapper {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: $syntaxHighlighterColor;

    .syntax-highlighter-keyword {
      color: rgb(249, 38, 114);
      font-weight: 700;
    }

    a,
    .syntax-highlighter-string {
      color: $syntaxHighlighterStringColor;
    }

    a {
      text-decoration: underline;
    }
  }
}

.mac-window {
  @include box-shadow-1($boxShadow2);

  position: relative;
  height: auto;
  min-width: inherit;
  font-size: 14px;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  background: $whiteColor;
  min-height: 300px;

  &.dark {
    background: $macWindowDarkBgColor !important;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a {
      color: $whiteColor;
    }

    a:hover,
    a:active {
      color: $docsAppSecondaryColor;
    }
  }

  .titlebar-wrapper {
    user-select: none;
    padding: 12px 6px 8px 15px;
  }

  .body-wrapper {
    width: 100%;
    height: 100%;
    padding: 8px 10px 10px 18px;
  }
}

section.first {
  background: linear-gradient(45deg, $docsAppSecondaryColor 0%, #0080ff 100%);

  .item-left {
    position: relative;

    //for mobile devices
    @media (max-width: #{$mobileMaxWidth}px) {
      @include item-align();
      @include horz-vert-center();

      h1.heading {
        margin-bottom: 45px;
        font-weight: 400;
        color: #fff;
      }
      p.latest-version-link {
        margin-top: 45px;
        color: $whiteColor;
      }

      .github-latest-version-wrapper {
        a {
          color: $whiteColor;
          text-decoration: underline;
        }
      }
    }

    //for non-mobile devices
    @media (min-width: #{$nonMobileMinWidth}px) {
      //only use 100vh when min-height of vp is greater than a certain value
      @media (min-height: #{$minHeightFor100vh}px) {
        @include item-align();
      }
      @include horz-vert-center(false);

      h1.heading,
      p.latest-version-link {
        display: none;
      }
    }

    .image-wrapper {
      text-align: center;

      #app-screenshot-file-explorer {
        max-width: 400px;
        width: 80%;
        height: auto;
        @include box-shadow-1($boxShadow2);
        @include border-radius(5px);
      }
    }
  }

  .item-right {
    @include horz-vert-center();

    //for mobile devices
    @media (max-width: #{$mobileMaxWidth}px) {
      padding: $paddingNonFlex;
    }

    //for non-mobile devices
    @media (min-width: #{$nonMobileMinWidth}px) {
      //only use 100vh when min-height of vp is greater than a certain value
      @media (min-height: #{$minHeightFor100vh}px) {
        @include item-align();
      }

      @media (max-height: #{$minHeightFor100vh - 1}px) {
        padding: $paddingNonFlex;
      }
    }

    .mac-window {
      @include box-shadow-1($boxShadow2);

      width: 90%;
      max-width: 500px;

      .desc-wrapper {
        padding: 0 10px 0 10px;
        line-height: 20px;
        max-width: 500px;

        h1.heading {
          margin-bottom: 10px;
          font-weight: 500;
          color: $docsAppSecondaryColor;
        }

        p.latest-version-link {
          margin-bottom: 25px;

          &.first-item {
            margin-bottom: 17px;
          }

          .title {
            margin-bottom: 5px;
          }

          a {
            text-decoration: underline;
          }

          .github-latest-version-wrapper {
            a {
              text-decoration: underline;
            }
          }

          .block {
            display: block;
            margin-bottom: 3px;
          }
        }

        @media (max-width: #{$mobileMaxWidth}px) {
          text-align: left;

          h1.heading {
            margin-bottom: 10px;
            font-size: 3rem;
            font-weight: 500;
          }
        }

        .line-1 {
          margin-bottom: 10px;
        }

        .line-2 {
          margin-bottom: 10px;
        }
      }

      .btn-wrapper {
        margin-bottom: 16px;
        text-align: center;

        .button {
          @media (max-width: #{$mobileMaxWidth}px) {
            display: block;
            width: 100%;
          }
          @media (min-width: #{$nonMobileMinWidth}px) {
            display: block;
            width: 100%;
          }
        }
      }

      &.light {
        .btn-wrapper {
          .button {
            @include create-download-buttons(
              $btn-names-list,
              $background-color-list,
              $color-list,
              $border-color-list,
              $background-color-active-hover-list,
              $border-color-active-hover-list,
              $color-active-hover-list
            );
          }
        }
      }

      &.dark {
        .btn-wrapper {
          .button {
            @include create-download-buttons(
              $btn-names-list,
              $background-color-list-dark,
              $color-list-dark,
              $border-color-list-dark,
              $background-color-active-hover-list-dark,
              $border-color-active-hover-list-dark,
              $color-active-hover-list-dark
            );
          }
        }
      }
    }
  }
}

section.second {
  background: linear-gradient(45deg, #263238 0%, #435b71 100%);

  .divider {
    @media (max-width: #{$mobileMaxWidth}px) {
      order: 2;
    }

    border-top: 0.1rem solid rgba(255, 255, 255, 0.25);
  }

  .item-left {
    @media (max-width: #{$mobileMaxWidth}px) {
      order: 3;
    }

    position: relative;
    @include horz-vert-center();

    //for mobile devices
    @media (max-width: #{$mobileMaxWidth}px) {
      padding: $paddingNonFlex;
    }

    //for non-mobile devices
    @media (min-width: #{$nonMobileMinWidth}px) {
      @include item-align();
    }

    .image-wrapper {
      text-align: center;

      #app-screenshot-file-transfer {
        @include box-shadow-1($boxShadow2);
        @include border-radius(5px);

        max-width: 400px;
        width: 80%;
        height: auto;
      }
    }
  }

  .item-right {
    @media (max-width: #{$mobileMaxWidth}px) {
      order: 1;
    }
    @include horz-vert-center();

    //for mobile devices
    @media (max-width: #{$mobileMaxWidth}px) {
      padding: $paddingNonFlex;
    }

    //for non-mobile devices
    @media (min-width: #{$nonMobileMinWidth}px) {
      //only use 100vh when min-height of vp is greater than a certain value
      @media (min-height: #{$minHeightFor100vh}px) {
        @include item-align();
      }

      @media (max-height: #{$minHeightFor100vh - 1}px) {
        padding: $paddingNonFlex;
      }
    }

    .desc-wrapper {
      padding: 0 20px 0 20px;
      line-height: 20px;
      max-width: 500px;

      .feature-lists {
        cursor: default;

        ul {
          display: grid;
        }

        li {
          display: inline-block;
        }

        li,
        span {
          float: left;
          line-height: 24px;
          position: relative;
          font-size: 15px;
          transition: background-color 1.5s ease;
          margin-bottom: 0;
        }

        span {
          padding: 6px 60px 6px 20px;
          line-height: 20px;
          background: $docsAppSecondaryColor;
          color: $whiteColor;
          text-decoration: none;
          @include border-radius(0 8px 8px 0);
          @include box-shadow-1(0 0 2px $boxShadowColor1);

          &::after {
            @include border-radius(5px);
            @include box-shadow-1(-1px -1px 2px $boxShadowColor1);

            top: 50%;
            right: 0;
            transform: translateY(-50%);
            content: '';
            position: absolute;
            left: 4px;
            float: left;
            width: 10px;
            height: 10px;
            background: $whiteColor;
          }

          &:hover {
            background: #555;
          }

          &:hover::before {
            border-color: transparent $docsAppSecondaryColor transparent
              transparent;
          }
        }
      }
    }
  }
}

footer {
  background: linear-gradient(45deg, #ff5d50 0%, #ff5d50 100%);

  //for mobile devices
  @media (max-width: #{$mobileMaxWidth}px) {
    @include item-align();
  }

  //for non-mobile devices
  @media (min-width: #{$nonMobileMinWidth}px) {
    //only use 100vh when min-height of vp is greater than a certain value
    @media (min-height: #{$minHeightFor100vh}px) {
      @include item-align();
    }

    @media (max-height: #{$minHeightFor100vh - 1}px) {
      padding: $paddingNonFlex;
    }
  }

  @include horz-vert-center();

  .footer-wrapper {
    height: 70%;
    width: 90%;
    max-width: 900px;
    max-height: 500px;

    .mac-window {
      height: 100%;
    }
  }
}

pre::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: $macWindowDarkBgColor;
}

pre::-webkit-scrollbar {
  width: 8px;
  height: 3px;
  opacity: 1;
  transition: background-color 0.3s;
}

pre::-webkit-scrollbar-thumb:hover {
  background-color: #757575;
}

pre::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: #888686;
}
